<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="treeDefaultProps"
          :expand-on-click-node="false"
          highlight-current
          node-key="id"
          :default-expanded-keys="currentExpandNodeId"
          @node-click="handleNodeClick"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
        />
      </el-col>
      <el-col :span="20">
        <vxe-toolbar custom>
          <template #buttons>
            <vxe-button status="success" @click="showModal('create',dialogs.create.formData)">新增</vxe-button>
            <vxe-button status="primary" @click="quickCurd()">增删改查</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          :data="childrenTableData"
        >
          <vxe-column type="seq" align="right" width="40" />
          <vxe-column field="code" title="权限编码" />
          <vxe-column field="path" title="路径" />
          <vxe-column field="wxPath" title="小程序路径" />
          <vxe-column field="component" title="组件" />
          <vxe-column field="redirect" title="重定向" />
          <vxe-column field="metaTitle" title="菜单名称" />
          <vxe-column field="icon" title="图标" align="center" width="60">
            <template #default="{row}">
              <i :class="row.icon" />
            </template>
          </vxe-column>
          <vxe-column field="hidden" title="是否隐藏">
            <template slot-scope="{row}">
              <el-tag v-if="row.hidden=== 1" type="danger">是</el-tag>
              <el-tag v-if="row.hidden=== 0" type="primary">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="seq" title="排序" />
          <vxe-column field="type" title="类型">
            <template slot-scope="{row}">
              <el-tag v-if="row.type==='module'" type="primary">模块</el-tag>
              <el-tag v-if="row.type==='page'" type="success">页面</el-tag>
              <el-tag v-if="row.type==='button'" type="danger">按钮</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="createTime" title="创建时间" :visible="false" />
          <vxe-column field="updateTime" title="修改时间" :visible="false" />
          <vxe-column field="createByName" title="创建人" :visible="false" />
          <vxe-column field="updateByName" title="修改人" :visible="false" />
          <vxe-column field="op" title="操作">
            <template slot-scope="scope">
              <vxe-button type="text" status="primary" @click="showModal('update',scope.row)">编辑</vxe-button>
              <vxe-button type="text" status="danger" :disabled="scope.row.children && scope.row.children.length>0" @click="deleteTableRow(scope.row.id)">删除</vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
        <create-dialog
          v-if="dialogs.create.visible"
          v-model="dialogs.create.visible"
          :form-data="dialogs.create.formData"
          @success="CreateSuccess"
        />
        <update-dialog
          v-if="dialogs.update.visible"
          v-model="dialogs.update.visible"
          :title="dialogs.update.title"
          :form-data="dialogs.update.formData"
          @success="loadTable"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Api from '@/api/upms/routers'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
import { pidToChildren } from '@/utils/tree'
export default {
  name: 'UpmsRouters',
  components: { CreateDialog, UpdateDialog },
  mixins: [VxeTableMixin],
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      childrenTableData: [],
      treeDefaultProps: {
        children: 'children',
        label: 'metaTitle'
      },
      currentTreeSelectedKey: '0',
      currentExpandNodeId: ['0'],
      query: {
        baseParams: {
          code: '',
          path: '',
          component: '',
          redirect: '',
          metaTitle: '',
          hidden: '',
          seq: '',
          pid: ''
        },
        sort: 'seq asc',
        page: {
          currentPage: 1,
          pageSize: -1
        }
      },
      dialogs: {
        create: {
          formData: {
            pid: 0,
            code: '',
            type: 'module',
            seq: 0
          }
        }
      }
    }
  },
  computed: {
    treeData() {
      return pidToChildren(this.tableData, { id: 'id', pid: 'pid', label: 'metaTitle' }, true)
    }
  },
  watch: {
    tableData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentTreeSelectedKey)
          const children = this.$refs.tree.getNode(this.currentTreeSelectedKey)
          if (children && children.data && children.data.children) {
            this.childrenTableData = children.data.children
          } else {
            this.childrenTableData = []
          }
        })
      }
    }

  },
  mounted() {
    this.confirmBaseQueryData()
  },
  methods: {
    handleNodeExpand(data, node, self) {
      this.currentExpandNodeId.push(data.id)
    },
    handleNodeCollapse(data, node, self) {
      for (const i in this.currentExpandNodeId) {
        if (this.currentExpandNodeId[i] === data.id) {
          this.currentExpandNodeId.splice(i, 1)
          break
        }
      }
    },
    CreateSuccess() {
      this.loadTable()
      this.dialogs.create.formData.seq = this.dialogs.create.formData.seq + 10
    },
    handleNodeClick(data) {
      this.currentTreeSelectedKey = data.id
      this.dialogs.create.formData.pid = data.id
      this.dialogs.create.formData.code = data.code || ''
      this.dialogs.create.formData.component = data.component ? ((data.code.toLowerCase()).replace('_', '/') + '/') : ''
      this.dialogs.create.formData.type = (data.type || 'module') === 'module' ? 'page' : 'button'
      this.dialogs.create.formData.seq = data.children ? (data.children.length * 10 + 10) : 0
      this.childrenTableData = data.children
    },
    quickCurd() {
      const children = this.$refs.tree.getNode(this.currentTreeSelectedKey)
      if (children.data.type !== 'page') {
        this.$message({
          type: 'error',
          message: '只能在类型为 页面 的节点操作'
        })
        return false
      }
      this.$confirm('给当前节点快速 添加 增删改查 按钮').then(() => {
        const opList = [{ code: 'CREATE', title: '新增' }, { code: 'DELETE', title: '删除' }, { code: 'UPDATE', title: '修改' }, { code: 'LIST', title: '查询' }]
        for (var i = 0; i < opList.length; i++) {
          Api.create({
            code: children.data.code + '_' + opList[i].code,
            pid: children.data.id,
            seq: i * 10 + 10,
            type: 'button',
            metaTitle: opList[i].title
          })
        }
        setTimeout(() => {
          this.loadTable()
        }, 1000)
      }).catch(() => {})
    }
  }
}
</script>

<style>

</style>
